<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-03-01 16:17:31"
-->
<template>
  <v-row>
    <v-col cols="12" sm="8">
      <v-progress-linear indeterminate v-if="loading"></v-progress-linear>
      <v-list two-line subheader>
        <MemberItem v-for="(item,index) in memberList" :key="index" :item="item"/>
      </v-list>
      <p class="text-center">共<b>{{tableItemTotal}}</b>条数据</p>
      <v-pagination color="primary" v-model="tablePage" :length="tablePageCount"></v-pagination>
    </v-col>
    <v-col cols="12" sm="4">
      <MemberTags v-model="selectedTagId"/>
    </v-col>
  </v-row>
</template>
<script>
import * as API from '@/api/admin/wx-member.js'
import MemberItem from './MemberItem.vue'
import MemberTags from './MemberTags.vue'
export default {
  name: 'WxMemberList',
  components: { MemberItem, MemberTags },
  props: {
    search: {
      type: Object,
      required: true
    },
    nickname: {
      type: String,
      default: ''
    }
  },
  data: function () {
    return {
      memberList: [],
      tablePage: 1, // 页码
      tablePageCount: 0, // 总页数
      tablePagePer: 30, // 每页个数
      tableItemTotal: 0,
      tableSearchField: {},
      loading: false,
      selectedTagId: null
    }
  },
  created: function () {
    this.fetchData()
  },
  watch: {
    tablePage: function() {
      this.fetchData()
    },
    nickname: function() {
      this.fetchData()
    },
    selectedTagId: function() {
      this.fetchData()
    }
  },
  computed: {
    searchParam: function() {
      return Object.assign(this.search, { wx_nickname: this.nickname }, { wx_tags: this.selectedTagId })
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      API.fetchList({ page: this.tablePage, page_size: this.tablePagePer, search: this.searchParam }).then(res => {
        this.memberList = res.data.data
        this.tableItemTotal = res.data.total
        this.tablePageCount = res.data.last_page
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style scoped>
</style>
